<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack()
}
const list = ref([
  {
    id: 1,
    name: '店长推荐',
  },
  {
    id: 2,
    name: '家常菜',
  },
  {
    id: 3,
    name: '本店招牌',
    isExpand: true,
    children: [
      {
        id: 4,
        name: '本店招牌二级',
      },
      {
        id: 5,
        name: '招牌二级',
      },
    ],
  },
  {
    id: 6,
    name: '特色烧烤',
    isExpand: true,
    children: [
      {
        id: 7,
        name: '蔬菜类',
      },
    ],
  },
  {
    id: 8,
    name: '其他',
    isExpand: false,
    children: [
      {
        id: 9,
        name: '其他二级',
      },
    ],
  },
])
function init() {
  list.value = list.value.map((item) => {
    return {
      ...item,
      isSelect: !item.children,
      children: item.children?.map((child) => {
        return {
          ...child,
          isSelect: true,
        }
      }),
    }
  })
}
const value = ref()
onMounted(() => {
  init()
})
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="选择分类" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <scroll-view
      scroll-y
      class="box-border flex-1 overflow-hidden p-[10px]"
      :show-scrollbar="false"
    >
      <wd-radio-group v-model="value" class="!bg-transparent" cell shape="dot">
        <template v-for="item in list" :key="item.id">
          <wd-radio v-if="item.isSelect" :value="item.id" class="rounded-lg bg-white !mb-[10px]">
            {{ item.name }}
          </wd-radio>
          <view v-else class="rounded-lg bg-white py-[13px] pl-[15px] !mb-[10px]">
            <view class="flex">
              <view
                class="i-carbon-caret-right block h-[20px] w-[20px] text-main transition-all"
                :class="item.isExpand ? 'rotate-90' : 'rotate-0'"
                @click="item.isExpand = !item.isExpand"
              />
              <wd-text :text="item.name" color="#333" size="14px" class="ml-1" />
            </view>
            <view v-if="item.children && item.isExpand" class="mt-2 pl-4">
              <template v-for="ic in item.children" :key="ic.id">
                <wd-radio :value="item.id">
                  {{ ic.name }}
                </wd-radio>
              </template>
            </view>
          </view>
        </template>
      </wd-radio-group>
    </scroll-view>
    <view class="bg-white p-4">
      <wd-button type="primary" :round="false" plain class="w-full">新建分类</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
